<template>
    <div>
        <el-dialog
            :fullscreen="fullscreen"
            @close="closeEditCustomer"
            :visible.sync="visible"
            width="80%">
            <div slot="title">
                <div
                    style=" width:600px;display: flex;align-items: center;justify-content: space-between;border-bottom: #99a9bf 1px solid;padding-bottom: 10px">
                    <span style="font-weight: bold">Edit Customer</span>
                </div>
            </div>
            <div class="fullscreen" @click="onFullScreenClick">
                <i class="el-icon-full-screen"/>
            </div>

            <div style="padding-left: 10px;padding-right: 20px">
                <el-row :gutter="20" style="margin-top: -15px">
                    <el-col :span="10">
                        <div>
                            <span style="font-size: 18px;font-weight: bold">Customer Information</span>
                            <el-tag :type="editCustomerForm.customerStatus==='20'?'danger':'success'"
                                    style="margin-left: 10px">
                                {{ editCustomerForm.customerStatus === '20' ? 'Freeze' : 'Normal' }}
                            </el-tag>
                        </div>
                        <descriptions :column="2" ref="viewCustomer">
                            <descriptions-item label="customerId" span="2"> {{ editCustomerForm.customerId }}
                            </descriptions-item>
                            <descriptions-item label="Name">{{ editCustomerForm.customerName }}</descriptions-item>
                            <descriptions-item label="Country">{{
                                    editCustomerForm.customerCountry
                                }}
                            </descriptions-item>
                            <descriptions-item label="City">{{ editCustomerForm.customerCity }}</descriptions-item>
                            <descriptions-item label="Address">{{
                                    editCustomerForm.customerAddress
                                }}
                            </descriptions-item>
                            <descriptions-item label="Post Code">{{ editCustomerForm.postCode }}</descriptions-item>
                            <descriptions-item label="Enterprise Url">{{
                                    editCustomerForm.enterpriseUrl
                                }}
                            </descriptions-item>
                            <descriptions-item label="Tax Id">{{ editCustomerForm.taxId }}</descriptions-item>
                            <descriptions-item label="Tax Type">{{ editCustomerForm.taxType }}</descriptions-item>
                            <descriptions-item label="Account Group">{{
                                    editCustomerForm.accountGroup
                                }}
                            </descriptions-item>
                            <descriptions-item label="Enterprise Property">{{
                                    editCustomerForm.enterpriseProperty
                                }}
                            </descriptions-item>
                            <descriptions-item label="Annual Sales Revenue">{{
                                    editCustomerForm.annualSalesRevenue
                                }}
                            </descriptions-item>
                            <descriptions-item label="Product Type">{{
                                    editCustomerForm.productType
                                }}
                            </descriptions-item>
                            <descriptions-item label="Software Brand">{{
                                    editCustomerForm.softwareBrand
                                }}
                            </descriptions-item>
                            <descriptions-item label="Note">{{ editCustomerForm.note }}</descriptions-item>
                        </descriptions>

                    </el-col>
                    <el-col :span="14">
                        <div>
                            <div slot="header">
                                <span style="font-size: 18px;font-weight: bold">Customer Contacts</span>
                            </div>
                            <el-table
                                :size="fullscreen?'':'small'"
                                :data="customerContactsTable"
                                ref="customerContactsTable">
                                <el-table-column
                                    prop="contactsId"
                                    label="Id"
                                    width="60">
                                </el-table-column>
                                <el-table-column
                                    prop="contactsName"
                                    label="Name"
                                    width="60">
                                </el-table-column>
                                <el-table-column
                                    prop="contactsDept"
                                    label="Dept"
                                    width="80">
                                </el-table-column>
                                <el-table-column
                                    prop="contactsPosition"
                                    label="Position"
                                    width="60">
                                </el-table-column>
                                <el-table-column
                                    prop="contactsTelephone"
                                    label="Telephone"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsMobilephone"
                                    label="Mobilephone"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsFax"
                                    label="Fax"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsEmail"
                                    label="Email"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsQq"
                                    label="QQ"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="contactsWechat"
                                    label="Wechat"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                            </el-table>
                        </div>

                        <div style="margin-top: 80px">
                            <div slot="header">
                                <span style="font-size: 18px;font-weight: bold">Customer Relationship</span>
                            </div>
                            <el-table :data="customerRelationshipTable"
                                      ref="customerRelationshipTable">
                                <el-table-column
                                    prop="relativeCustomerId2"
                                    label="relativeCustomerId"
                                    width="120">
                                </el-table-column>
                                <el-table-column
                                    prop="relativeCustomerName"
                                    label="relativeCustomerName"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="customerRelationName"
                                    label="customerRelationName"
                                >
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </div>


        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "ViewCustomerDialog",
    props: ['visible', 'onClose', 'callback', 'options'],
    data() {
        return {
            //fullscreen
            fullscreen: false,

            editCustomerContactsVisible: false,
            editCustomerRelationshipVisible: false,
            addCustomerContactsVisible: false,
            addCustomerRelationshipVisible: false,
            disable1: false,
            customerContactsTable: [{
                contactsId: "1",
                contactsName: "lxp",
                contactsDept: "销售一部",
                contactsPosition: "部长",
                contactsTelephone: "123456",
                contactsMobilephone: "123456",
                contactsFax: "123456",
                contactsEmail: "123@163.com",
                contactsQq: "123456",
                contactsWechat: "123456"
            }],
            editCustomerForm: {
                customerId: "10",
                customerName: "岳阳林纸股份有限公司",
                customerCountry: undefined,
                customerCity: undefined,
                customerAddress: undefined,
                postCode: undefined,
                enterpriseUrl: undefined,
                taxId: undefined,
                taxType: undefined,
                accountGroup: undefined,
                enterpriseProperty: undefined,
                annualSalesRevenue: undefined,
                productType: undefined,
                softwareBrand: undefined,
                note: undefined,
            },

            customerRelationshipTable: [{
                relativeCustomerId2: "1",
                relativeCustomerName: "zbt",
                customerRelationName: "母公司"
            }],

        }
    },
    methods: {
        sss(){
          this.editCustomerForm.customerId=134
        },
        //后端交互 取得当前客户的联系人与关联客户列表
        loadCustomerContacts(customer) {
            this.$axios.post(
                '/customer/customer/queryAllCustomerContacts',
                customer
            ).then(res => {
                console.log(res)
                this.customerContactsTable = res.data.obj
            });
        },
        loadCustomerRelationship(customer) {
            this.$axios.post(
                '/customer/customer/queryAllCustomerRelationship',
                customer
            ).then(res => {
                console.log(res)
                this.customerRelationshipTable = res.data.obj
            });
        },

        //fullScreen
        onFullScreenClick() {
            this.fullscreen = !this.fullscreen
        },

        //customer
        closeEditCustomer() {
            this.onClose()
        },


        setDataa(data) {
            this.editCustomerForm = data
            // this.editCustomerForm.customerCity = JSON.parse(data.customerCity)//TODO JSON parse省市信息
        }
    },
    mounted() {
        var user = this.$store.getters.getUser;
        this.currentUser = user;
        console.log(user)
        var role = user.roles[0]
        if (role === this.$npms.roles.MARKET_SP) {
            this.disable1 = true
        }
    }
}
</script>

<style scoped>
.fullscreen {
    position: absolute;
    right: 50px;
    top: 18px;
    cursor: pointer;
    transition: all 200ms;
}

.fullscreen:hover {
    color: #6DBEF8;
}
</style>